
/**************************
	General stuff
 *************************/

body{
	background: url(../img/ricepaper2.png);
}

p{
	margin: 10px 0px;
}

a span{
	font-size: 12px;
}

.app {
 	padding-top: 70px;
}

.footer{
 	margin-top: 45px;
	padding: 35px 0 36px;
	border-top: 1px solid #E5E5E5;
}

acronym{
 	background-color: #09f;
 	color: #fff;
 	border-radius: 5px;
 	padding: 0px 3px;
}
.embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dropdown-menu .sub-menu {
	font-size: 12px;
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
  visibility: visible;
  display: block;
}

.navbar .sub-menu:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}
.navbar .sub-menu:after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}
.dropdown-menu .sub-menu2 {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu2 {
  visibility: visible;
  display: block;
}

.navbar .sub-menu2:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}
.navbar .sub-menu2:after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}
.sub-navbar {
	padding-top: 10px;
	padding-bottom: 3px;
	background: #25A3D1;
}
.sub-navbar .container {
	color: #FFF;
}

#detail{
        font-family: Menlo, Monaco, "Courier New", monospace;
        font-size: 12px;
        color: #468847;
        background-color: #d6e9c6;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
      }

      #myTab{
        background: #eff5f7;
        -webkit-border-radius: 3px 3px 0 0;
        -moz-border-radius: 3px 3px 0 0;
        border-radius: 3px 3px 0 0;
      }
      .nav > li > a:hover {
      text-decoration: none;
      background-color: #d9edf7;
      }
      .row-wrap{
        margin-left: 30px;
      }
      
#template_desc, #path_error, #generate_success, #generate_fail{
	margin-top: 10px;
}

#template_desc{
	width: 0;
}

#configurator_wrapper{
	overflow: hidden;
	height: 0px;	
}

#code_generator_block{
	overflow: hidden;
}

	#generate_wrapper{
		margin-left: -1500px;
		overflow: hidden;
	}

.m10{
	margin-bottom: 10px;
}

/**************************
	Overrides
**************************/

.dropdown-menu li{
	cursor: default;
}

/********************************************************************

	Loading Circle 
	http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit

********************************************************************/

div.spinner {
	position: relative;
	width: 24px;
	height: 24px;
	display: inline-block;
	display: none;
	margin-top: 10px;
}

div.spinner p{
	margin: 0px;
	padding: 0px;
	position: relative;
	left: 30px;
	top: 2px;
	width: 100px;
}

div.spinner div {
	width: 12%;
	height: 26%;
	background: #000;
	position: absolute;
	left: 44.5%;
	top: 37%;
	opacity: 0;
	animation: fade 1s linear infinite;
	border-radius: 50px;
	box-shadow: 0 0 3px rgba(0,0,0,0.2);
}

div.spinner div.bar1 {transform:rotate(0deg) translate(0, -142%); animation-delay: 0s;}    
div.spinner div.bar2 {transform:rotate(30deg) translate(0, -142%); animation-delay: -0.9167s;}
div.spinner div.bar3 {transform:rotate(60deg) translate(0, -142%); animation-delay: -0.833s;}
div.spinner div.bar4 {transform:rotate(90deg) translate(0, -142%); animation-delay: -0.75s;}
div.spinner div.bar5 {transform:rotate(120deg) translate(0, -142%); animation-delay: -0.667s;}
div.spinner div.bar6 {transform:rotate(150deg) translate(0, -142%); animation-delay: -0.5833s;}
div.spinner div.bar7 {transform:rotate(180deg) translate(0, -142%); animation-delay: -0.5s;}
div.spinner div.bar8 {transform:rotate(210deg) translate(0, -142%); animation-delay: -0.41667s;}
div.spinner div.bar9 {transform:rotate(240deg) translate(0, -142%); animation-delay: -0.333s;}
div.spinner div.bar10 {transform:rotate(270deg) translate(0, -142%); animation-delay: -0.25s;}
div.spinner div.bar11 {transform:rotate(300deg) translate(0, -142%); animation-delay: -0.1667s;}
div.spinner div.bar12 {transform:rotate(330deg) translate(0, -142%); animation-delay: -0.0833s;}

@keyframes fade {
	from {opacity: 1;}
	to {opacity: 0.1;}
}

@keyframes fade {
	from {opacity: 1;}
	to {opacity: 0.1;}
}
